<template>
  <div class="appointment-pay">
    <nav-top title="支付费用" :goback="true"></nav-top>
    <div class="pay-info">
      <p class="pay-sum">
        支付费用
        <span style="color:#06A44F">￥7800</span>
      </p>
      <p class="pay-type-label">支付方式</p>
      <!-- <van-icon name="/static/icon/appointment/.png" /> -->
      <van-radio-group v-model="payType">
        <van-cell-group :border="false">
          <van-cell class="pay-type" :border="false" clickable @click="payType = '1'">
            <img src="/static/icon/appointment/pay-wx.png" slot="icon" />
            <p slot="title">微信支付</p>
            <van-radio checked-color="#1BA253" name="1" />
          </van-cell>
          <van-cell class="pay-type" :border="false" clickable @click="payType = '2'">
            <img src="/static/icon/appointment/pay-help.png" slot="icon" />
            <p slot="title">找人代付</p>
            <van-radio checked-color="#1BA253" name="2" />
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>
    <div class="submit">
      <van-button class="submit-btn" type="primary" size="large" @click="pay">支付</van-button>
    </div>
    <div class="read-text">
      <p class="read-label">改期和取消政策</p>
      <p class="read-value">
        如果您在
        <span>2019-09-19 23:59(北京时间)</span>或者之前更改或取消预订，则不需支付任何费用。
        <br />如果您在
        <span>2019-09-19 23:59(北京时间)</span>之后更改或取消预约，则需支付20%原消费费用的手续费。
      </p>
      <p class="read-label">更改日期</p>
      <p class="read-value">请于约定时间前3个工作日致电利佳或联系利佳微信客服更改您的预约日期，我们将在与医疗机构确认后重新发出确认信息，利佳将不收取任何改期费用。</p>
      <p class="read-label">取消预约</p>
      <p class="read-value">
        如预约产品服务后需取消预约，请通过利佳健康平台进行操作或
        拨打客服热线通知利佳。在利佳确认您预约成功之前，您可免费
        取消本次服务。在利佳确认您预约成功之后，您有可能法获得全
        额退款，详情可阅读****协议。如若您多次未赴约，我们会将此
        视为恶意行为，这将会影响您在利佳网及利佳合作机构所享受的
        奖励与权限。
      </p>
      <p class="read-value">
        注：若有需要，我们可以向您开具商业收据，利佳健康和医疗中
        心为香港机构，不能向您开具内地增值税发票。
        点击“支付”，即表示您确认已阅读并接受我们的
        <a>条款和条件</a>以及
        <a>隐私政策</a>
      </p>
    </div>

    <van-popup v-model="payHelp">
      <img class="pay-help-code" src="/static/img/pay-help-code.png" />
    </van-popup>
  </div>
</template>

<script>
import NavTop from "@/components/nav/navBar";

export default {
  components: {
    NavTop
  },
  name: "AppointmentPay",
  data() {
    return {
      payType: '1',
      payHelp: false
    };
  },
  methods: {
    pay() {
      if (this.payType == '2') this.payHelp = true;
    }
  }
};
</script>
<style lang='scss' scoped>
.appointment-pay {
  background-color: #f5f5f7;
  p {
    color: #000;
    font-size: 12px;
    font-family: Microsoft YaHei;
    line-height: 1em;
    margin: 0;
  }
  .pay-info {
    margin-top: 46px;
    padding: 14px 10px 0 10px;
    background-color: #fff;
    p {
      padding-bottom: 16px;
      border: none;
      span {
        padding-left: 23px;
      }
    }
    .pay-sum {
      padding-bottom: 15px;
      border-bottom: 1px solid #f5f5f5;
    }
    img {
      width: 23px;
      height: 23px;
    }
    .pay-type-label {
      padding-top: 16px;
    }
    .pay-type {
      padding: 5px 0 5px 0;
      p {
        padding-top: 5px;
        padding-left: 9px;
      }
    }
  }
  .submit {
    padding: 0 9px;
    .submit-btn {
      margin-top: 30px;
      margin-bottom: 19px;
      height: 41px;
      font-size: 15px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 1px;
      background-color: #06a44f;
      border-color: #06a44f;
      border-radius: 6px;
    }
  }
  .read-text {
    .read-label {
      padding-left: 10px;
      padding-bottom: 10px;
    }
    .read-value {
      padding: 0 20px 13px 16px;
      color: #666;
      font-size: 10px;
      line-height: 2em;
      span,
      a {
        color: #07a34f;
      }
    }
  }
  .pay-help-code {
    width: 255px;
    height: 255px;
  }
}
</style>
